<template>
  <NuxtLayout name="user" menuActive="1">
    <div class="box">
      <template v-if="infoData.idCertifiedStatus == 4">
        <el-descriptions title="身份证人像面" :column="1">
          <el-descriptions-item label="姓名">{{ infoData.idName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ infoData.idSex === 0 ? '男' : infoData.idSex === 1 ? '女' : '-'
            }}</el-descriptions-item>
          <el-descriptions-item label="民族">{{ infoData.idNation || '-' }}</el-descriptions-item>
          <el-descriptions-item label="出生日期">{{ infoData.idBirth || '-' }}</el-descriptions-item>
          <el-descriptions-item label="身份证地址">{{ infoData.idAddress || '-' }}</el-descriptions-item>
          <el-descriptions-item label="身份证号码">{{ infoData.idNumber || '-' }}</el-descriptions-item>
          <el-descriptions-item label="采集证件照">
            <el-image :src="infoData.idFrontImgNow" class="box_image" :preview-src-list="[infoData.idFrontImgNow]" />
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="身份证国徽面" :column="1" style="margin-top: 30px;">
          <el-descriptions-item label="发证机关">{{ infoData.idAuthority || '-' }}</el-descriptions-item>
          <el-descriptions-item label="证件有效期开始时间">{{ infoData.idValidDateStart || '-' }}</el-descriptions-item>
          <el-descriptions-item label="证件有效期结束时间">{{ infoData.idValidDateEnd || '-' }}</el-descriptions-item>
          <el-descriptions-item label="采集证件照">
            <el-image :src="infoData.idBackImgNow" class="box_image" :preview-src-list="[infoData.idBackImgNow]" />
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <div class="box_qrcode" v-else>
        <el-alert title="您的认证已过期，请重新认证" type="error" show-icon v-if="infoData.idCertifiedStatus === 5" />
        <br />
        <el-image :src="`https://api.jkb100.com/api/wx/qrcode.jpg?page=pages/userCenter/identity&envVersion=release&scene=${infoData.id}`"
          class="box_qrcode_image" />
        <p class="box_qrcode_text">请用微信扫一扫，完善认证信息</p>
        <br />
        <el-button @click="refreshFn">刷新</el-button>
      </div>
    </div>
  </NuxtLayout>
</template>

<script setup>
import { getIdFrontImg, getIdBackImg } from '~/server/api';
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_身份认证",
  keywords: "技考邦,身份认证",
  description: "技考邦，身份认证。",
  ogTitle: "技考邦_身份认证",
  ogDescription: "技考邦，身份认证。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
});
const infoData = ref(useRoute().meta.userinfo || {})
async function getIdBefore() {
  let { data: idbeforeRes } = await useAsyncData('getIdFrontImg', () => useServerRequest(getIdFrontImg, {
    method: 'get'
  }))
  if (idbeforeRes.value && idbeforeRes.value.errno === 0) {
    infoData.value = {...infoData.value, ...{
      idFrontImgNow: `data:image/png;base64,${idbeforeRes.value.result}`
    }}
  }
}
getIdBefore()
async function getIdAfter() {
  let { data: idafterRes } = await useAsyncData('getIdBackImg', () => useServerRequest(getIdBackImg, {
    method: 'get'
  }))
  if (idafterRes.value && idafterRes.value.errno === 0) {
    infoData.value = {...infoData.value, ...{
      idBackImgNow: `data:image/png;base64,${idafterRes.value.result}`
    }}
  }
}
getIdAfter()
// 刷新
function refreshFn() {
  window.location.reload()
}
</script>

<style lang="less" scoped>
.box {
  padding: 30px;

  &_image {
    width: 200px;
    height: 140px;
  }

  &_qrcode {
    display: table;
    margin: 0 auto;
    text-align: center;

    &_image {
      width: 165px;
      height: 165px;
      display: block;
      margin: 0 auto;
    }

    &_text {
      margin: 10px 0 0 0;
      text-align: center;
      font-size: 14px;
      color: #999;
    }
  }
}
</style>